<template>
	<div class="exam_record_wrapper">
		<div ref="myChart" class="chart"></div>
		<el-descriptions class="detail" :column="2" border>
			<el-descriptions-item label="考试名称" :span="2">
				<b>{{ activeRow.name }}</b>
			</el-descriptions-item>
			<el-descriptions-item label="考试时间" :span="2">
				<span>{{ activeRow.startTime }} 至 {{ activeRow.endTime }}</span>
			</el-descriptions-item>
			<el-descriptions-item label="试卷名称">{{ activeRow.testPaper.name }}</el-descriptions-item>
			<el-descriptions-item label="试卷类型">{{ activeRow.testPaper.paperType == 1 ? '普通试卷' : '随机试卷' }}</el-descriptions-item>
			<el-descriptions-item label="考试时长">{{ activeRow.examDuration }} 分钟</el-descriptions-item>
			<el-descriptions-item label="卷面总分">{{ activeRow.testPaper.totalScore }} 分</el-descriptions-item>
			<el-descriptions-item label="及格分">{{ activeRow.passScore }} 分</el-descriptions-item>
			<el-descriptions-item label="应考人数">{{ examStudent.total }}人</el-descriptions-item>
			<el-descriptions-item label="参考人数">{{ examStudent.have }}人</el-descriptions-item>
			<el-descriptions-item label="参考率">{{ examStudent.haveRatio }}%</el-descriptions-item>
			<el-descriptions-item label="缺考人数">{{ examStudent.absent }}人</el-descriptions-item>
			<el-descriptions-item label="缺考率">{{ examStudent.absentRatio }}%</el-descriptions-item>
			<el-descriptions-item label="及格人数">{{ examStudent.pass }}人</el-descriptions-item>
			<el-descriptions-item label="及格率">{{ examStudent.passRatio }}%</el-descriptions-item>
		</el-descriptions>
		<div class="import_export_button" v-if="['testee', 'noexam'].indexOf(activeName) !== -1">
			<template v-if="activeName === 'testee'">
				<el-button size="small" type="primary" @click="handleExportNotPass()">导出不及格用户</el-button>
			</template>
			<template v-if="activeName === 'noexam'">
				<el-button size="small" type="warning" @click="handleExportNotExam()">导出未参考用户</el-button>
			</template>
		</div>
		<el-tabs v-model="activeName" type="card">
			<el-tab-pane label="考生分析" name="testee"></el-tab-pane>
			<el-tab-pane label="错题分析" name="errors"></el-tab-pane>
			<el-tab-pane label="未交卷" name="noexam"></el-tab-pane>
		</el-tabs>
		<testee-analysis :exam-id="testExamId" v-if="activeName === 'testee'"></testee-analysis>
		<errors-analysis :exam-id="testExamId" v-if="activeName === 'errors'"></errors-analysis>
		<noexam-analysis :exam-id="testExamId" v-if="activeName === 'noexam'"></noexam-analysis>
		<ExamAnswer />
	</div>
</template>
<script>
import * as echarts from 'echarts';
import { getExamStudentData, exportNotPass, exportNotSubmit } from '@/api/admin/exam/testExam';
export default {
	components: {
		ExamAnswer: () => import('@/views/Learn/Eaxm/ExamAnswer.vue'),
		testeeAnalysis: () => import('@/views/Admin/exam/exam/testeeAnalysis.vue'),
		errorsAnalysis: () => import('@/views/Admin/exam/exam/errorsAnalysis.vue'),
		noexamAnalysis: () => import('@/views/Admin/exam/exam/noexamAnalysis.vue')
	},
	data() {
		return {
			myChart: null,
			passNumber: 0,
			answerNumber: 0,
			option: {
				title: {
					show: true,
					textStyle: { color: 'grey', fontSize: 20 },
					text: '暂无数据',
					left: 'center',
					top: 'center'
				},
				series: {
					type: 'pie',
					radius: '50%',
					label: { formatter: '{b}\n{c}人' },
					data: []
				}
			},
			activeName: 'testee',
			examStudent: {}
		};
	},
	computed: {
		activeRow() {
			return this.$store.state.question.activeRow;
		},
		testExamId() {
			return this.activeRow.id || '';
		}
	},
	watch: {
		testExamId: {
			async handler(val) {
				this.getExamStudent(val);
			},
			immediate: true
		}
	},
	mounted() {
		this.$nextTick(() => {
			this.init();
		});
	},
	methods: {
		init() {
			if (!this.option) return false;
			this.myChart = echarts.init(this.$refs.myChart);
			this.myChart.setOption(this.option);
			window.addEventListener('resize', () => {
				this.myChart.resize();
			});
		},

		//获取考试学员数据
		async getExamStudent() {
			let result = await getExamStudentData(this.testExamId).then((res) => res.data);
			if (result.code === '0') {
				let datas = !!result.data && !!result.data[0] ? result.data[0] : {};
				let have = parseInt(datas.haveNumber);
				let pass = parseInt(datas.passNumber);
				let total = parseInt(datas.requiredNumber);
				let absent = total - have;
				if (total > 0) {
					let haveRatio = Math.round((have / total) * 10000) / 100;
					let passRatio = Math.round((pass / total) * 10000) / 100;
					let absentRatio = Math.round((absent / total) * 10000) / 100;
					this.examStudent = { have, pass, total, absent, haveRatio, passRatio, absentRatio };
				} else {
					this.examStudent = { have, pass, total, absent };
				}
				this.option.title.show = have === 0;
				if(have > 0) {
					this.option.series.data = [
						{ name: '及格', value: pass },
						{ name: '不及格', value: have - pass }
					];
					this.myChart.setOption(this.option);
				}
			}
		},

		handleExportNotPass() {
			window.location.href = `${process.env.VUE_APP_BASEURL}/testExam/openApi/exportNotPass/${this.testExamId}`;
		},

		handleExportNotExam() {
			window.location.href = `${process.env.VUE_APP_BASEURL}/testExam/openApi/exportNotSubmit/${this.testExamId}`;
		}
	}
};
</script>
<style lang="scss" scoped>
.exam_record_wrapper::v-deep {
	.chart {
		float: right;
		width: 300px;
		height: 300px;
	}
	.detail {
		width: calc(100% - 300px);
		margin-bottom: 20px;
	}
	.el-tabs__header {
		margin-bottom: 0;
	}
}
.import_export_button {
	float: right;
	position: relative;
	z-index: 1;
}
</style>
